<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom :title="$t('navigationBar.chart')"></nav-bar-custom>
    </template>
    <template v-slot:gBody>
      <!--库存数量占比 -->
      <view class="repertory">
        <view class="repertory_title">{{ $t('JsInternational.ofStock') }}</view>
        <view class="repertory_number">
          <view class="repertory_number_title">{{ $t('JsInternational.amount') }}</view>
          <view class="repertory_number_desc">{{ data.pineTotal || 0 }}</view>
        </view>
        <view class="repertory_number" style="background-color:#cab6b5">
          <view class="repertory_number_title">{{ $t('JsInternational.totalStockCount') }}</view>
          <view class="repertory_number_desc">{{ data.totalTrusts || 0 }}</view>
        </view>
        <view class="repertory_picture">
          <qiun-data-charts :animation="false" type="ring" :opts="data.ringOpts" :chartData="data.ringChartData" />
        </view>
      </view>
      <view class="repertory">
        <view class="repertory_title">{{ $t('JsInternational.stockoutStatistic') }}</view>
        <view class="repertory_number">
          <view class="repertory_number_title">{{ $t('JsInternational.amountOfStockout') }}</view>
          <view class="repertory_number_desc">{{ data.lineTotal || 0 }}</view>
        </view>
        <view class="repertory_number" style="background-color:#cab6b5">
          <view class="repertory_number_title">{{ $t('materials.stockoutAmt') }}</view>
          <view class="repertory_number_desc">{{ data.tQTY || 0 }}</view>
        </view>
        <!-- :animation="false" 关闭charts动画防止兼容问题 -->
        <view class="repertory_picture">
          <qiun-data-charts :animation="false" type="line" :opts="data.lineOpts" :chartData="data.lineChartData" />
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getPdaReportData, getPdaLineGraph } from '@/api/api.js';
import { onShow } from '@dcloudio/uni-app';

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let data = reactive({
  ringChartData: {}, //饼图
  lineChartData: {}, //折现图
  ringOpts: {
    rotate: false,
    rotateLock: false,
    color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#1890FF", "#ea7ccc"],
    dataLabel: true,
    legend: {
      show: true,
      position: "left",
      lineHeight: 30,
      fontSize: 12
    },
    title: {
      name: t('materials.inventoryRatio'),
      fontSize: 12,
      color: "#666666"
    },
    subtitle: {
      name: "100%",
      fontSize: 14,
      color: "#7cb5ec"
    },
    extra: {
      ring: {
        ringWidth: 50,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 10,
        border: true,
        borderWidth: 3,
        borderColor: "#FFFFFF",
        linearType: "custom"
      }
    }
  },
  lineOpts: {
    color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc", "#1890FF"],
    padding: [0, 10, 15, 10],
    legend: {
      show: true,
      position: "top",
      lineHeight: 25,
    },
    xAxis: {
      disableGrid: true,
      rotateLabel: true, //是否旋转文字角度
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2,
    },
    extra: {
      line: {
        type: "straight",
        width: 2,
      }
    }
  },
  // 柱状图 数据
  pineTotal: null,
  totalTrusts: null,
  columnList: [],
  columnPerc: [],
  // 折线图数据
  categories: [],
  lineData: [],
  lineTotal: null,
  tQTY: null
})
onShow(() => {
  chartLsit()
})
// onMounted
onMounted(() => {
  repertoryRingChart();
  repertoryLineChart();
});

const chartLsit = () => {
  // 柱状图
  getPdaReportData().then(res => {
    let arr = []
    if (res.code == 0) {
      data.inventoryList = res.data
      data.pineTotal = res.data.totalBoxQty;
      data.totalTrusts = res.data.totalPallectQty;
      res.data.materialRates?.forEach(item => {
        arr.push({
          name: item.materialCode,
          value: Number(Number(item.rate).toFixed(2))
        })
      })
      data.columnPerc = arr
    }

  })
  // 折现图的获取
  getPdaLineGraph({
    startDate: monthList(),
    endDate: new Date().toISOString().split('T')[0]
  }).then(res => {
    let arr1 = []
    let arr2 = []
    if (res.code == 0) {
      data.lineTotal = res.data.totalOutQty; //出库总数量
      data.tQTY = res.data.totalOutPallectQty //出库总托数
      res.data.deliveryRates.forEach(item => {
        arr1.push(item.month)  //折现的标题
        arr2.push(Number(item.pallectQty)) //折现的数据
      });
      data.categories = arr1
      data.lineData = arr2
    }
  });
}
// 获取当前月的前面的5月日期
const monthList = () => {
  var start = new Date().getTime() / 1000
  var end = start - (60 * 60 * 24 * 156)
  var lastDate = new Date(parseInt(end) * 1000).getFullYear() + "-" + (new Date(parseInt(end) * 1000).getMonth() + 1) + "-" + new Date(parseInt(end) * 1000).getDate()
  console.log(lastDate, new Date(parseInt(end) * 1000).toLocaleString())
  return lastDate
}

//  饼图的数据获取
const repertoryRingChart = () => {
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      series: [
        {
          data: data.columnPerc
          // data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 }, { "name": "三班", "value": 20 }, { "name": "四班", "value": 18 }, { "name": "五班", "value": 8 }]
        }
      ]
    };
    data.ringChartData = JSON.parse(JSON.stringify(res));
  }, 500);
};

// 山峰图
const repertoryLineChart = () => {
  setTimeout(() => {
    let res = {
      categories: data.categories,
      series: [
        {
          name: t('pageTranslation.qtyOfStockOut'),
          data: data.lineData,
        },
      ],
    };
    data.lineChartData = JSON.parse(JSON.stringify(res));
  }, 500);
};
</script>

<style lang="scss" scoped>
.repertory {
  background: #fff;
  margin-bottom: 20rpx;
  overflow: hidden;
  width: 100%;

  &_title {
    height: 80rpx;
    padding-left: 48rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    font-weight: 600;
  }

  &_number {
    height: 60rpx;
    background-color: #c3d0ec;
    margin: 0 20rpx 20rpx 50rpx;
    display: flex;

    &_title {
      width: 240rpx;
      line-height: 60rpx;
      text-align: left;
      font-size: 26rpx;
      margin-left: 20rpx;
    }

    &_desc {
      flex: 1;
      line-height: 60rpx;
      text-align: right;
      font-size: 26rpx;
      margin-right: 20rpx;
    }
  }

  &_picture {
    height: 440rpx;
    margin: 0 40rpx 0 46rpx;
  }
}
</style>
